| mikeo_410 |  |
googleドライブに関連したソフトウエア群は多彩でどこから取り付いて良いやら悩んでしまいます。わたしが理解した限りでは、googleドライブのサービスがもっとも高位のようです。googleドライブはストレージだと思っていましたが、実際にはデータを出し入れする多様なアプリケーションの基幹のようです。googleドライブをブラウザで開いた状態も、googleドライブをストレージに見せるアプリケーションです。このメニューには、googleドキュメント、googleスプレッドシート、Apps Scriptプロジェクト、などがあって目的にあったアプリケーションを起動することができます。
はじめは、googleドキュメントだけを使っていました、googleドキュメントのエントリはgoogleドキュメントの一覧です。それはファイル名として付けたものではなく、文書編集時に付けたドキュメントの名前です。ファイルや保存場所を全く意識することなく使っていました。googleスプレッドシートも同様で、スプレッドシートに付けた名前の一覧がエントリです。googleドライブは、このドキュメントやスプレッドシートの名前をファイル名のように見せるアプリケーションです。
ファイルのように見えているのは「コンテナ」のようです。googleドキュメントやgoogleスプレッドシートにスクリプトを追加すると自動的に「無題のプロジェクト」が作られます。その「概要」を表示すると「コンテナ」として、元になったドキュメントやスプレッドシートを開くことができます。おそらくコンテナは圧縮フォルダのような複合ファイルの独立したファイルシステムです。
コンテナは一意な識別子を持ち、名前は単なるプロパティの1つです。フォルダ階層とは無関係にコンテナにアクセスでき、フォルダとの親子関係を扱うかどうかはアプリケーション次第です。googleドキュメントやgoogleスプレッドシートはフォルダ階層を扱いませんが、唯一「移動」が可能です。
httpdサーバは色々なCMS（Contents Management System）を同時に稼働させますが、googleドライブやgoogleドキュメント、googleスプレッドシートもCMSと同じような位置にあり、しかもデータを介して連携が可能です。
google Apps Scriptによるウェブアプリも同様で、このサイトのようにCMSそのものにもなります。
アカウントとか認証とかgoogleドライブがどうやって使えるようになったのかはもう分からなくなってしまいました。googleドキュメントだけを使っている間は、ドキュメントの一覧が出た状態をブックマークしていました。
わたしは、EdgeとChromeの両方を起動していますが、Edgeはマイクロソフトの認証で、Chromeはgoogleのアカウントでログインした状態で開かれています。googleドライブやgoogleドキュメントなど区別なく使えます。
あらためて試して見ると、https://drive.google.com/ や https://drive.google.com/drive/ で googleドライブが開き、https://docs.google.com/document/ で googleドキュメントの一覧が開き、https://docs.google.com/spreadsheets/ で googleスプレッドシートの一覧が開くもののようです。https://script.google.com/ でプロジェクトの一覧になります。
総合的なメニューはgoogleドライブにあります。メニューから Apps Script を選択すればプロジェクトが作られコード.gsの編集画面になります。
プロジェクトの一覧で「＋新しいプロジェクト」ボタンを押して作ることもできます。
スプレッドシートの編集画面で「拡張機能」「Apps Script」と選んでもプロジェクトが作られます。googleドキュメントの編集画面で「ツール」「スクリプト エディタ」と選んでも「無題のプロジェクト」が作られます。
プロジェクトの一覧では、アイコンでドキュメント由来か、スプレッドシート由来かが区別できます。また、プロジェクトの「概要」のコンテナでも分かります。
どれも「無題のプロジェクト」なので、名前を付けるのが最初の仕事です。
googleドキュメント、googleスプレッドシートと同様、プロジェクトの一覧にフォルダや階層の概念はありません。必要なら編集画面の左上の「名前」の欄の次のアイコン群から「移動」を選びます。
プロジェクトを開くことは、コード.gsの編集画面になることのようです。プロジェクトには他の画面はありません。
プロジェクトのエディタはコード.gs を開いており、プロジェクト内のファイルの一覧が左に表示されています。コード.gs が唯一のファイルですが「ファイル＋」でファイルが追加出来ます。このファイルはgoogleドライブでブラウズできるファイルではありません。プロジェクトを開いているときに、エディタが表示するファイルです。
このファイル名には拡張子が表示されますが、プログラミングでは拡張子を記述しません。また、ファイルの作成時も拡張子を入力しないことが大事です。
ファイルの追加を行なうと「コード」か「HTML」かの選択を求められます。これが、拡張子の .gs 、.html の由縁です。
「コード」は、サーバサイドのスクリプトで、サーバがインタプリットします。
「HTML」は、ブラウザに送られるもので、サーバは直接関与せず、「コード」の記述で参照されるものです。
ひな形として、以下のような例を示します。
index、css、js の3つのファイルを追加します。追加の際に聞かれる種類は「HTML」を選びます。左の一覧には、index.html、css.html、js.html と記述します。
いずれの追加の際にもHTMLのテンプレートが自動で表示されますが、css.html、js.html では消してしまいます。
index.html <!DOCTYPE html> <html> <head> <base target="_top"> <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?> </head> <body> <h1> <?= a_variable ?> </h1> <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?> </body> </html> | |
css.html <style> </style> | js.html <script> </script> |
コード.gsは以下のように記述します。
function doGet() { let ct = HtmlService.createTemplateFromFile("index"); ct.a_variable = "Apps Script ひな形" Logger.log(ct.evaluate().getContent()); return ct.evaluate(); } |
これを、「デプロイ」ボタンを押して、「新しいデプロイ」を選び、歯車型の「設定」アイコンをクリックして「ウェブアプリ」に設定します。デプロイするとURLが表示されるので、そのURLをクリックして作成した Apps Script を実行します。
index.html の記述で、<?= ?> のスクリプトレットは、HTMLがブラウザに送られる前に、サーバが処理することを示します。
HtmlService.createHtmlOutputFromFile('css') は、css.htmlファイルを読み込んで、HtmlOutput形式を作ることを示します。.getContent() は、そのHTML形式の文字列を返します。index.html には、css.html と js.html の2つのファイルを読み込んでindex.htmlの中に展開した上で送ることが記述されています。
<?= ?> のスクリプトレットの中の記述は サーバが実行するGASスクリプトと認識されます。関数呼び出しを書けば、コード.gsに記述した関数が呼び出されます。
また、変数を書いて代入もできます。例では a_variable に文字列を代入します。
こうした、テンプレートに変更を適用するのが evaluate() です。
コード.gs に書かれた doGet() 関数は、サーバが呼び出す関数です。ブラウザがURLでサーバにリクエストすると呼び出されます。
この関数の戻り値は、ブラウザに返信されます。
doGet() 関数は引数を書いて、クエリパラメータを受け取れます。
利用者の見ているブラウザから URL を送ると、サーバは コード.gs 内の doGet() 関数を呼び出します。この関数は適切なHTMLを作って応答します。
この仕組みで何が出来るかを考えます。
送り返すHTMLには JavaScript を含めることが出来るので、ブラウザサイドだけで完結したアプリケーションが作れます。文字列のエンコード/デコードや暦日の変換などが作れます。
は、簡化字が読めないので、対応する日本で常用する漢字に変えるものです。サーバは最初にJavaScriptを含んだHTMLページを送り出すだけで、ブラウザが JavaScript を実行して動作します。
また、サーバにデータを記録したり、サーバのデータを利用するアプリケーションが作れます。そのためにはサーバがデータを保持する機構と、利用者が画面に表示されたボタンをクリックで情報を送受する仕組みが必要です。前者はスプレッドシートが使えます。後者にはブラウザが実行するJavaScript関数の google.script.run() 関数が用意されています。また、Get、Post を行うことも出来ます。
は、サーバサイドにあるスプレッドシートに読み書きするサンプルです。